<template>
  <div>
      <div class="profile" @click="editProfile">
          <img v-if="!profile.head_img" class="avatar" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1294403272,3279068192&fm=26&gp=0.jpg" alt="">
          <img v-else class="avatar" :src="'http://liangwei.tech:3000'+profile.head_img" alt="">
          <div class="profile-middle">
              <div class="name">
                  <span v-if="profile.gender == 1" class="iconfont iconxingbienan"></span>
                  <span v-else class="iconfont iconxingbienv"></span>
                  {{profile.nickname}}
              </div>
              <div class="time">2019-10-10</div>
          </div>
          <span class="iconfont iconjiantou1"></span>
      </div>
      <cellBar
            label="我的关注"
            desc="关注的用户"
            @jump="$router.push('/myfollow')"
      ></cellBar>
      <cellBar
            label="我的跟帖"
            desc="跟帖/回复"
            @jump="$router.push('mycomments')"
      ></cellBar>
      <cellBar
            label="我的收藏"
            desc="文章/视频"
            @jump="$router.push('/mycollection')"
      ></cellBar>
      <cellBar
            label="设置"
            @jump="editProfile"
      ></cellBar>
      <cellBar
            label="退出登录"
            @jump="logout"
      ></cellBar>
  </div>
</template>

<script>
import cellBar from "../components/cellBar";
export default {
    data(){
        return{
            profile:{}
        }
    },
    components:{
        cellBar:cellBar
    },
    methods:{
        jumpToPage(label){
            console.log('跳转到'+label+'页面');
        },
        logout(){
            this.$router.replace({
                path:'/login'
            })
        },
        editProfile(){
            this.$router.push({
                name:'EditprofilePage'
            })
        }
    },
    // 加载页面后获取本地存储的数据，验证token，渲染个人信息页面
    mounted(){
        // 发送请求，获取用户的数据
        this.$axios({
            url:'/user/'+localStorage.getItem('user_id'),
            method:'get',
            headers:{
                 Authorization: localStorage.getItem('token')
            }
            
        }).then(res=>{
            this.profile = res.data.data;
        })
    }
}
</script>

<style lang="less" scoped>
    .profile{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8.333vw;
        border-bottom: 5px solid #eeeeee;
    }
    .profile-middle{
        flex: 1;
        padding-left: 2.778vw;
        text-align: left;
        font-size: 16px;
    }
    .time{
        font-size: 12px;
    }
    .avatar{
        width: 19.444vw;
        border-radius: 50%;
    }
</style>